<template>
    <div class="index-content">
        <div class="index-top">
            <div class="index-top-left">
                <div class="index-title">
                    <h1>徐州航务中心电子台账管理系统</h1>
                </div>
            </div>
            <div class="index-top-right">
                <div class="user-info">
                    <p>{{user_info.department_name}}.{{ this.$store.state.big_user_info.true_name }}</p>
                </div>
                <div class="btns">
                    <el-button    @click="updatePassword">修改密码</el-button>
                    <el-button   @click="exit">退出</el-button>
                </div>
            </div>
        </div>
        <div class="index-main">
            <div class="index-main-left">
                <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose">
                <el-menu-item v-if="sub_department.length>0" :index="item.user_id" v-for="(item,i) in sub_department" :key="i" @click="getSubDepartmentExcels(item)">{{item.department_name}}</el-menu-item>
                <el-menu-item index="2" @click="getMyExcels" v-if="sub_department.length<=0">
                    <i class="el-icon-folder"></i>
                    <span slot="title">信息系统日常养护台账</span>
                </el-menu-item>
                <el-menu-item index="3" @click="getOtherExcels" v-if="sub_department.length<=0">
                    <i class="el-icon-folder"></i>
                    <span slot="title">机电日常养护台账</span>
                </el-menu-item>
                <el-menu-item index="4" @click="getOtherExcels" v-if="sub_department.length<=0">
                    <i class="el-icon-folder"></i>
                    <span slot="title">土建日常养护台账</span>
                </el-menu-item>
                <el-menu-item index="5" @click="getOtherExcels" v-if="sub_department.length<=0">
                    <i class="el-icon-folder"></i>
                    <span slot="title">养护工程报表</span>
                </el-menu-item>
                </el-menu>
            </div>
            <div class="index-show-content">
              <router-view class="main-page">
              </router-view>  
            </div>           
        </div>
    </div>
  </template>
  
  <script>
import { showLoading } from '../components/loading'

    export default{
        name: 'Index',
        data(){
            return {
                user_info:{},
                sub_department:[]
            }
        },
  
        mounted(){

            if(!this.$store.state.user_info._id){
                
                this.$router.push({path:'/login'})
            }
            this.user_info=this.$store.state.user_info
            // for(let i=0; i<this.user_info.sub_department; i++){
            //     let tmp=this.user_info.sub_department[i]
            //     tmp.
            // }
            this.sub_department=this.user_info.sub_department

        },
        methods:{
            test() {
                this.$router.push({path:'/index/test2'})
            },
            exit(){
                this.$router.push({path:'/login'})
            },
            getMyExcels(){
                this.$router.push({path:'/index/my_excels'})
            },
            getOtherExcels(){
                this.$router.push({path:'/index/other_excels'})
            },
            getSubDepartmentExcels(item){
                let user_id=item.user_id
                let user_name=item.department_name
                this.$router.push({path:'/index/sub_department_excels',query:{"user_id": user_id,"user_name":user_name}})
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            updatePassword(){
                this.$prompt('新密码', '请输入新密码', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({ value }) => {
                        this.$ajax({
                        method: 'post',
                        url: '/update_big_user_password',
                        data:{
                            "user_id":this.$store.state.big_user_info._id,
                            "password":value
                        }
                    }).
                    then(res => {    
                        this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                    });  
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消修改'
                    });       
                });             
            },
            createExcel(){
                this.$prompt('请输入台账名称', '', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^.+$/,
                    inputErrorMessage: '不能为空'
                }).then(({ value }) => {
                    this.$router.push({path:'/create',query:{"excel_name": value}})
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消'
                    });       
                });
                
            }
        },
        
  
    }
  </script>
  
  
  <style>
    .index-content{
        background: rgb(235, 232, 232);  
        width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    .index-top{
        width: 100%;
        height: 10vh;
        background: #1464bb;
        display: flex;
        flex-direction: row;
        padding-bottom: 1vh;
    }
    .index-top-left{
        width: 70%;
        /* border: 2px solid red; */
        color: white;
        text-align: center;
    }
    .index-title{
        padding-left: 2%;
        text-align: left;
        font-size: 1.2em;
    }
    .index-top-right{
        width: 20%;
        /* border: 2px solid rgb(26, 21, 100); */
        color: white;
        margin-left:12%;
        display: flex;
        flex-direction: column;
    }
    .user-info{
        width: 60%;
        margin-left: 20%;
        text-align: right;
    }
    .btns{
        width: 60%;
        margin-left: 40%;   
    }
    .user-info .btns .el-btn{

    }
    .user-info .btns .el-btn:hover{
        color: rgb(216, 215, 215);
    }
    .index-main{
        width: 100%;
        height: 89vh;
        background: rgb(235, 232, 232);  
        display: flex;
    }
    .index-main-left{
        width: 13%;
        height: 89vh;
        background: white       
    }
    .index-show-content{
        width: 86%;
        height: 89vh;
        background: rgb(235, 232, 232);  
    }
  </style>
  
  